/* 全局样式 */
:root {
  --primary-color: #0060ff;
  --primary-light: #3d84ff;
  --primary-dark: #004acc;
  --success-color: #00c2a8;
  --warning-color: #ff9f2e;
  --danger-color: #ff4757;
  --info-color: #8c9eff;
  --background-color: #f5f8ff;
  --text-primary: #2c3e50;
  --text-secondary: #606f7b;
  --border-color: #e8eeff;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--background-color);
}

/* 清除浮动 */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* 主布局容器 */
.main-container {
  min-height: calc(100vh - 50px);
  padding: 20px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .main-container {
    padding: 10px;
  }
}

/* 页面标题样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

/* 表格操作按钮组 */
.table-operations {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 分页容器 */
.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

/* 状态标签颜色 */
.status-sufficient {
  color: var(--success-color);
}

.status-warning {
  color: var(--warning-color);
}

.status-critical {
  color: var(--danger-color);
}

.status-out {
  color: var(--text-secondary);
}

/* 入库出库数量颜色 */
.inbound-quantity {
  color: var(--success-color);
  font-weight: bold;
}

.outbound-quantity {
  color: var(--danger-color);
  font-weight: bold;
}

/* Element UI 组件覆盖样式 */
.el-button--primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.el-button--success {
  background-color: var(--success-color);
  border-color: var(--success-color);
}

.el-button--warning {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
}

.el-button--danger {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
} 